<!DOCTYPE html>
<html>
<head>
    {include file="layout:_meta" /}
    <style type="text/css">
        .layui-layedit-iframe {
            background: white;
            height: 450px;
        }

        .layui-layedit {
            background: white;
        }

        /*--location--*/
        #btn-wrap {
            margin: 100px auto;
            text-align: center;
        }

        form {
            margin: 30px;
        }

        /*定位*/
        .map-location {
            width: 28px;
            height: 30px;
            position: absolute;
            top: 8px;
            right: 0px;
            z-index: 5;
            font-size: 18px;
            cursor: pointer;
        }

        .map-location-input {
            padding-right: 30px;
        }

    </style>
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding:10px 30px;">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>相册</li>
            <li>详情</li>
        </ul>
        <div class="layui-tab-content" style="background: whitesmoke;">
            <!--基本信息-->
            <div class="layui-tab-item layui-show">

                <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label"> 商品分类</label>-->
                <!--<div class="layui-input-block">-->
                <!--<select name="cate_id"  lay-verify="required" lay-search>-->
                <!--<option value="">&#45;&#45;请选择 商品分类&#45;&#45;</option>-->
                <!--{volist name="cate" id="v"}-->
                <!--{if condition="isset($list.cate_id)&&$v.id eq $list.cate_id "}-->
                <!--<option value="{$v.id}" selected>{$v.levelName}</option>-->
                <!--{else /}-->
                <!--<option value="{$v.id}">{$v.levelName} </option>-->
                <!--{/if}-->
                <!--{/volist}-->
                <!--</select>-->
                <!--</div>-->
                <!--</div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入 商品名称" lay-verify="required"
                               value="{:isset($list.name)?$list.name:''}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="sn" placeholder="请输入 商品编号" lay-verify="required"
                               value="{:isset($list.sn)?$list.sn:''}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--图片上传-->
                <div class="layui-form-item">
                    <label class="layui-form-label">缩略图</label>
                    <div class="layui-input-inline uploadHeadImage">
                        <div class="layui-upload-drag" id="headImg">
                            <i class="layui-icon"></i>
                            <p>点击上传图片，或将图片拖拽到此处</p>
                        </div>
                    </div>
                    <div class="layui-input-inline">
                        <div class="layer-photos-demo layui-upload-list"
                             style="text-align: center;margin: 0px !important;" id="layer-photos-demo">

                            <img src="{:isset($list.thumb)?$list.thumb:''}" lass="layui-upload-img headImage"
                                 height="155px" onclick="showBigImage(this)" id="demo1">
                            <input type="hidden" id="ad_img" name="thumb" value="{:isset($list.thumb)?$list.thumb:''}">
                            <p id="demoText">缩略图 不大于 120kb 图片规格：800*800</p>
                        </div>
                    </div>
                </div>
                <!--图片上传 end-->
                <div class="layui-form-item">
                    <label class="layui-form-label"> 商品描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" lay-verify="" maxlength="20"
                                  onkeyup="javascript:texLength(this, 20, 'textarea_length');" placeholder="请输入描述"
                                  autocomplete="off" class="layui-textarea">{:isset($list.description)?$list.description:''}</textarea>
                        <span class="red" id="textarea_length" style="color: red">0</span> / <span
                            class="num_count">20</span> <span class="num_count">描述，20</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">销量</label>
                    <div class="layui-input-block">
                        <input type="number" name="sell_num" lay-verify="" placeholder="请输入 商品销量" lay-reqtext=""
                               autocomplete="off" value="{:isset($list.sell_num)?$list.sell_num:''}"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">序号</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" lay-verify="" placeholder="请输入序号 数字越小排序越靠前" lay-reqtext=""
                               autocomplete="off" value="{:isset($list.sort)?$list.sort:''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否推荐</label>
                    <div class="layui-input-block">
                        {if condition="isset($list.is_recommend)&&$list.is_recommend==1"}
                        <input type="checkbox" lay-filter="is_recommend" checked value="1" name="is_recommend"
                               lay-skin="switch" lay-text="推荐|不推荐">
                        {else /}
                        <input type="checkbox" lay-filter="is_recommend" value="0" name="is_recommend" lay-skin="switch"
                               lay-text="推荐|不推荐">
                        {/if}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        {if condition="isset($list.state)&&$list.state==1"}
                        <input type="checkbox" lay-filter="state" checked value="1" name="state" lay-skin="switch"
                               lay-text="上架|下架">
                        {else /}
                        <input type="checkbox" lay-filter="state" value="0" name="state" lay-skin="switch"
                               lay-text="上架|下架">
                        {/if}
                    </div>
                </div>

            </div>
            <!-- 商品相册-->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">多图列表：</label>
                    <div class="layui-upload layui-input-block">
                        <button type="button" class="layui-btn" id="btn_multiple_upload_img">多图上传</button>
                        <button type="button" class="layui-btn" id="btn_image_clear">清空多图</button>
                        <span style="border: 0px;color: red">单张图片删除：双击图片可删除 不大于 120kb  图片规格：800*800</span>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div class="layui-upload-list" id="upload_image_list">
                                {if condition="isset($list.images)"}
                                {volist name="images" id="v"}
                                <img style="height: 66px;margin-left: 7px" src="{$v}" title="单击删除"
                                     onclick="delMultipleImgs(this)" class="layui-upload-img">
                                {/volist}
                                {/if}
                            </div>

                            <input type="hidden" name="images" class="upload_image_url"
                                   value="{:isset($list.images)?$list.images:''}">
                        </blockquote>
                    </div>
                </div>
            </div>
            <!-- 商品详情-->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <textarea name="content" id="laydeit" placeholder="请输入描述" autocomplete="off" class="layui-textarea"
                              lay-verify="content"
                              style="display: none;">{:isset($list.content)?$list.content:''}</textarea>
                </div>
            </div>

            </div>
            <!--end-->
        </div>

        <div class="layui-form-item layui-hide">
            <input type="hidden" name="id" value="{:isset($list['id'])?$list['id']:''}">
            <input type="hidden" name="token" value="{:isset($list['token'])?$list['token']:''}">
            <input type="button" lay-submit lay-filter="addEdit" id="addEdit" value="确认">
        </div>
    </div>
    {include file="layout:_footer" /}
    <script src="__static__/admin/lib/jquery/1.9.1/jquery.js"></script>
    <script>
        var attr_arr = '';
        layui.config({
            base: '__static__/admin/' //静态资源所在路径
        }).extend({
            index: 'lib/index', //主入口模块
            laySku: 'laySku', //主入口模块
            locationX: 'location/locationX',
            location: 'location/location',
        }).use(['index', 'form', 'upload', 'layedit', 'location','laydate'], function () {
            var form = layui.form, $ = layui.$, upload = layui.upload, layedit = layui.layedit;
            var location = layui.location,laydate = layui.laydate;
            //拖拽上传 单图上传
            var uploadInst = upload.render({
                elem: '#headImg'
                , url: "/admin/index/upload_img" + '?uptype=goods'
                , size: 500
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    console.log(res.code, '==========================>图片上传返回<');
                    //如果上传失败
                    if (res.code != 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                    /*   console.log(res.data.src);*/
                    //   window.parent.uploadHeadImage(res.files);
                    var demoText = $('#demoText');
                    // $('#ad_img').val(res.files);
                    $('#ad_img').val(res.data.img_url);
                    console.log(demoText, '===========>,<!!!');
                    demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
            //end  url: "/admin/index/upload_img" + '?uptype=goods_edit',
            //编辑器
            layedit.set({
                //暴露layupload参数设置接口 --详细查看layupload参数说明
                uploadImage: {
                    url: "/admin/index/upload_img" + '?uptype=goods_edit' ,
                    accept: 'image',
                    acceptMime: 'image/*',
                    exts: 'jpg|png|gif|bmp|jpeg',
                    size: '10240'
                }
                , uploadVideo: {
                    url: '/Attachment/LayUploadFile',
                    accept: 'video',
                    acceptMime: 'video/*',
                    exts: 'mp4|flv|avi|rm|rmvb',
                    size: '20480'
                }
                //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
                //传递参数：
                //图片： imgpath --图片路径
                //视频： filepath --视频路径 imgpath --封面路径
                , calldel: {
                    url: '/Attachment/DeleteFile'
                }
                //开发者模式 --默认为false
                , devmode: true
                //插入代码设置
                , codeConfig: {
                    hide: true,  //是否显示编码语言选择框
                    default: 'javascript' //hide为true时的默认语言格式
                }
                // , tool: [
                //     'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                //     , '|', 'left', 'center', 'right', '|', 'link', 'unlink','images', 'image_alt', 'video', 'anchors'
                //     , '|','table', 'fullScreen'
                // ]
                , height: '90%'
            });
            var edit =  layedit.build('laydeit'); //建立编辑器
            form.verify({
                content: function(value) {
                    return layedit.sync(edit);
                }
            });
            //end
            //日期时间选择器
            laydate.render({
                elem: '#starttime'
                , type: 'datetime'
                , trigger: 'click'//呼出事件改成click
            });
            //日期时间选择器
            laydate.render({
                elem: '#endtime'
                , type: 'datetime'
                , trigger: 'click'//呼出事件改成click
            });
            //end
            //多图上传
            var uploadInsts = upload.render({
                elem: '#btn_multiple_upload_img'
                , url: "/admin/index/upload_img" + '?uptype=goods_photos'
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#upload_image_list').append('<img style="height: 66px;margin-left: 7px" src="' + result + '" title="单击删除" onclick="delMultipleImgs(this)" class="layui-upload-img">');
                    });
                }
                , done: function (res) {
                    //上传完毕
                    if (res.code == 0) {
                        var last_url = $(".upload_image_url").val();

                        var upload_image_url = "";
                        if (last_url) {
                            upload_image_url = last_url + "," + res.data.img_url;
                        } else {
                            upload_image_url = res.data.img_url;
                        }
                        $(".upload_image_url").val(upload_image_url);
                    } else {
                        //   dialog.tip(res.message);
                    }
                }
            });
            //end
            //sku

            //end

            form.on('switch(state)', function (data) {
                this.value = this.checked ? 1 : 0;
            });
            form.on('switch(is_recommend)', function (data) {
                this.value = this.checked ? 1 : 0;
            });

            // 自己维护初始化标注。这里给的是天安门  location
            var locationData = {lng: 116.404, lat: 39.915};


            location.render("#locationBtn", {
                type: 1,
                apiType: "baiduMap",
                coordinate: "baiduMap",
                mapType: 2,
                zoom: 15,
                title: '区域定位',
                init: function () {
                    return {
                        longitude: $("#longitude").val() ? $("#longitude").val() : locationData.lng,
                        latitude: $("#latitude").val() ? $("#latitude").val() : locationData.lat
                    };
                },
                success: function (data) {
                    $("#longitude").val(data.lng);
                    $("#latitude").val(data.lat);
                },
                onClickTip: function (data) {
                    console.log(data);
                }

            });
            //end  location

            //三级联动 选择一级区域时
            form.on('select(province)', function (data) {
                console.log(data,'==================>ffff<'); //得到被选中的值
                $("#cityinfo").find("option").remove();
                var data = myGrade(data.value);
                console.log(data, '=========================>,4444<');
                $("#cityinfo").append(data);
                form.render('select');

                //console.log(data);
            });

            //二级联动年级
            form.on('select(city)', function(data){
                //console.log(data.value); //得到被选中的值
                $("#countyinfo").find("option").remove();
                var data = myData(data.value);
                console.log(data ,'=========================>,4444<');
                $("#countyinfo").append(data);
                form.render('select');

                //console.log(data);
            });
            //获取二级区域
            function myGrade(id) {
                console.log(id,'===================>idddd<');
                var data1;
                $.ajax({
                    url: "{:url('area/get_second_area')}",
                    type: "post",
                    data: {action: 'jsondata', pid: id},
                    async: false,
                    success: function (data) {

                        data1 = data.data;
                        //data1 = JSON.parse(data);
                        console.log(data1, '++++++++++++++++++++++++++>5<');
                    },
                    error: function () {
                        layer.msg('读取数据失败！');
                    }
                });
                return data1;
            }
            //获取目录
            function myData(id) {
                var data1 ;
                $.ajax({
                    url:"{:url('area/get_second_area')}",
                    type:"post",
                    data:{action:'jsondata',pid:id},
                    async:false,
                    success:function(data){

                        data1 = data.data;
                        //data1 = JSON.parse(data);
                        console.log(data1,'++++++++++++++++++++++++++>5<');
                    },
                    error:function(){
                        layer.msg('读取数据失败！');
                    }
                });
                return data1;
            }
            //end
            //三级联动end

        });

        /**
         * 多图清除按钮点击事件
         */
        $("#btn_image_clear").click(function () {
            $('#upload_image_list').html("");
            $(".upload_image_url").val('');
        });

        /**
         * 多图上传的单击删除操作
         * @param this_img
         */
        function delMultipleImgs(this_img) {
            //获取下标
            var subscript = $("#upload_image_list img").index(this_img);
            multiple_images = $('.upload_image_url').val().split(",");
            //删除图片
            this_img.remove();
            //删除数组
            multiple_images.splice(subscript, 1);
            $('.upload_image_url').val(multiple_images);
        };

        $("#attr_ids").change(
            function () {
                getSclass();
            }
        );

        //end

        function texLength(obj, maxlength, id) {
            var curr = obj.value.length;
            if (curr > maxlength) {
                layer.msg('字数在' + maxlength + '字以内');
            } else {
                document.getElementById(id).innerHTML = curr;
            }
        }

    </script>
</body>
</html>